<template>
	<u-tabs
		:current="props.current"
		:list="props.tabs" 
		:lineColor="PRIMARY_COLOR" 
		:activeStyle="activeStyle" 
		:inactiveStyle="inactiveStyle"
		@change="onChange"
	/>
	<view class="space"></view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue';
	import { useStore } from 'vuex';
	import { Tabs, TabsStyle } from '@/types/interface';
	
	const store = useStore();
	const { PRIMARY_COLOR } = store.state.app;
	const emits = defineEmits(['change']);
	const props = defineProps({
		tabs: {
			type: Array,
			default: () => ([]),
		},
		current: {
			type: Number,
			default: 0,
		},
	});
	
	const baseStyle = reactive<TabsStyle>({
		fontSize: '28rpx',
		textAlign: 'center',
		width: `${ 100 / props.tabs.length }vw`,
		padding: '0 !important',
	});
	const activeStyle = reactive<TabsStyle>({
		color: PRIMARY_COLOR,
		fontWeight: 'bold',
		...baseStyle,
	});
	const inactiveStyle = reactive<TabsStyle>({
		color: '#545454',
		fontWeight: '400',
		...baseStyle,
	});
	const onChange = (e: Tabs): void => {
		emits('change', e);
	}
</script>

<style lang="scss" scoped>
	.u-tabs {
		position: fixed;
		z-index: 100;
		background-color: #FFFFFF !important;
		::v-deep .u-tabs__wrapper__nav__item {
			padding: 0;
		}
	}
	.space {
		height: 44px;
	}
</style>